<template>
	<view class="yueduye">
		<!-- 防止内容到状态栏 -->
		<view  class="nav-fixed" :style="{backgroundColor:bgColor}"></view>
		<!-- 小说内容区 -->
		<view class="content" @click="showTime" :style="{backgroundColor:bgColor,color:color}">
			<view class="yuedu-small-title">
				{{list.title}}
			</view>
			<view class="yue-title" :style="{fontSize:fontSize+'rpx',color:color}">
				{{list.title}}
			</view>
			<view class="yue-content" :style="{fontSize:fontSize+'rpx','line-height':lineHight+'rpx',color:color}">
				{{list.desc}}
			</view>
		</view>
		<!-- 上下面弹出层 -->
		<view class="popup" v-show="isShowTop">
			<readPopup :list="list" @directory="showDirectory" @setting="showSetting" @day="daySetting"  ></readPopup>
		</view>
		<!-- 目录弹出层 -->
		<up-popup :show="isDirectory" mode="left" :closeOnClickOverlay="true" :closeable="true" @close="isDirectory = false" >
			<directoryPopup :list="list" :title="title" ></directoryPopup>
		</up-popup>

		<!-- 设置弹出层 -->
		<u-popup :show="isSetting" mode="bottom" height="359rpx" @close="isSetting = false">
			<settingPopup :fontSize="fontSize" :gao="gao" :bei="bei" @fontSetting="fontSet" @height="heightSet" @bgColor="colorSet"></settingPopup>
		</u-popup>

	</view>
</template>
<script lang="ts" setup>
import readPopup from './components/readPopup.vue'
import directoryPopup from './components/directoryPopup.vue';
import settingPopup from './components/settingPopup.vue'
import { ref } from 'vue'
import {onShow} from '@dcloudio/uni-app'
import { useReadStore} from '@/store/modules/read'

const readStore = useReadStore()
const bgColor = ref<string>('#cff9ba')
const color = ref<string>('#00000')
const fontSize = ref<number>(0)
const lineHight = ref<number>(75)
const isShowTop = ref<boolean>(false)
const isSetting = ref<boolean>(false)
const isDirectory = ref<boolean>(false)
const gao = ref<number>(1)
const bei = ref<number>(1)
const list = ref<Object>({
						imgSrc:'/static/sift/item1.png',
						title:'陋室铭',
						geng:"更新至1288章",
						author:"刘禹锡 著",
						ziShu:"字数：128.90万字",
						show:false,
						desc:`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？”
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？”
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`
				})

const title = ref<Array<Object>>([
                    {id:0,title:"第1章 塞翁失虎，焉知非福啊啊啊啊啊啊",free:"免费",icon:false},
					{id:1,title:"第2章 以退为进",free:"免费",icon:false},
					{id:2,title:"第3章 这里蛋妖气",free:"免费",icon:false},
					{id:3,title:"第4章 等等，你到底是谁？",free:"免费",icon:false},
					{id:4,title:"第5章 周明府是何来头",free:"免费",icon:false},
					{id:5,title:"第6章 咦，这人看着眼熟",free:"免费",icon:false},
					{id:6,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:7,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:8,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:9,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:10,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:11,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:12,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:13,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:14,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:15,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:16,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},
					{id:17,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false},

])
const showDirectory = () =>{
	isDirectory.value = !isDirectory.value
	isShowTop.value = !isShowTop.value
}
const showSetting = () =>{
	isSetting.value = !isSetting.value
	isShowTop.value = !isShowTop.value
}
const daySetting = (backgroundColor :string,fontColor :string) :void =>{
	bgColor.value = backgroundColor
	color.value = fontColor
}

const colorSet = (backgroundColor :string,fontColor :string) =>{
	bgColor.value = backgroundColor
	color.value = fontColor
}

const showTime = () =>{
	isShowTop.value = !isShowTop.value
}

const fontSet = (size :number ) =>{
	fontSize.value = size
}

const heightSet = (height : number) =>{
	lineHight.value = height
}
onShow(() =>{
	fontSize.value =  readStore.getFontSize
	lineHight.value = readStore.getLineHeight.lineHeight
	gao.value = readStore.getLineHeight.hangGao

})


</script>
<style scoped lang="scss">
.yueduye{
	font-family: Microsoft YaHei;
	.nav-fixed{
		height: 50rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
	}
	.content{
		padding: 38rpx 36rpx 108rpx;;
		font-family: Microsoft YaHei;
		.yuedu-small-title{
			font-size: 24rpx;
			font-weight: 400;
			color: #A7A7A7;
			line-height: 50rpx;
		}
		.yue-title{
			font-size: 60rpx;
			font-weight: bold;
			color: #000000;
			line-height: 70rpx;
		}
		.yue-content{
			font-size: 52rpx;
			font-weight: 400;
			color: #000000;
			line-height: 75rpx;
		}
	}
	.advertising{
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 108rpx;
		background-color: #f1ddab;
	}
}
</style>